// 从Vue对象中解构出两个函数
const { defineAsyncComponent } = Vue

app.component("demo-async",{
    template:`
    <div class="demo-async">
        <!-- <async-com></async-com> -->

        <!-- suspense悬挂/挂起/束之高阁 Vue中用于加载异步组件的组件  -->
        <suspense>
            <!-- default默认插槽放置异步组件的真实内容 -->
            <!-- <template v-slot:default> -->
            <template #default>
                <async-com></async-com>
            </template>

            <!-- fallback插槽放置等待加载的过程中要显示的内容 -->
            <!-- <template v-slot:fallback> -->
            <template #fallback>
                <h1>一大波异步组件正在赶来...</h1>
            </template>
        </suspense>
    </div>
    `,
    data() {
        return {}
    },
    methods: {},
    computed: {}
})

/* 定义一个异步组件 */
const AsyncCom = defineAsyncComponent(

    /* 入参是一个回调函数：需要加载异步组件时回调这个函数 */
    () => new Promise(
        /* 3秒后兑现组件的具体内容 */
        (resolve) => {
            setTimeout(() => {
                resolve({
                    template: `<div>哥是异步组件，哥的数据量是狠大的，哥的加载需要一定的时间</div>`
                })
            }, 3000);
        }
    )

)

// 用定义好的异步组件覆盖原来的配置对象
// app.component("async-com",{data(){},template:``})
app.component("async-com",AsyncCom)